<template>

  <div>

    <el-card>

      <el-table
        :data="soonList"
        max-height="780px"
        height="780px"
        :row-class-name="tableRowClassName"
        style="width: 100%">

        <template slot="empty">
          <el-empty :image-size="100" description='暂无数据'></el-empty>
        </template>

        <el-table-column
          prop="userName"
          label="真实姓名"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.userName === 'UNKNOWN_NAME_DEFAULT'" style="color: darkorange">未知姓名</span>
            <span v-else>{{scope.row.userName}}</span>
            <span v-if="scope.row.nickname">({{scope.row.nickname}})</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="call"
          label="我对他的称呼"
        >
        </el-table-column>

        <el-table-column
          prop="remarks"
          label="备注"
        >
        </el-table-column>

        <el-table-column
          prop="surplusTime"
          label="剩余多久生日"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" size="mini" type="success">
              <span v-if="scope.row.surplusTime === 0">今天</span>
              <span v-else-if="scope.row.surplusTime === 1">剩余1天（明天）</span>
              <span v-else-if="scope.row.surplusTime === 2">剩余2天（后天）</span>
              <span v-else>{{scope.row.surplusTime}} 天</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="health"
          label="健康情况"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="birth"
          label="真实出生年月"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button @click="toUserDetailed(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看详情</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>

  </div>

</template>

<script>

  import http from '@/utils/http';

  export default {
    name: "BirthdayList",
    data(){
      return {
        // 即将生日的人员,全部
        soonList: [],
        // 今天生日的人
        todayList: [],
        // 还有一天就生日的
        oneList: [],
        // 还有2天就要生日的
        twoList: [],
        // 还有3天要生日的
        threeList: [],
        // 还有4天要生日的
        fourList: [],
        // 还有5天要生日的
        fiveList: [],
        // 其他剩余时间生日的
        otherList: [],
      }
    },
    methods: {
      /**
       * 打开用户详情，跳转到社交管理页面
       * @param data 数据
       */
      toUserDetailed(data){
        // console.log(data.id)
        this.$router.push({
          name:"toSocialConnectionList",
          // 除了这种方式传参，还可以 params 方式传参，参考：https://blog.csdn.net/sinat_52319736/article/details/127464798
          query: {
            userId: data.id,
          }
        })
      },
      /**
       * 页面不同行使用不同的颜色
       * @param row 数据
       * @param rowIndex 索引
       * @return {string} 返回的样式
       */
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
        // if (row.surplusTime === 1){
        //   return 'danger-row';
        // } else if (row.surplusTime === 2){
        //   return 'warning-row';
        // } else if (row.surplusTime === 3) {
        //   console.log("11")
        //   return 'success-row';
        // } else if (row.surplusTime === 4) {
        //   return 'primary-row';
        // } else {
        //   return ""
        // }
      },
      /**
       * 获取生日人员
       */
      getBirthdayList(){
        http.get("/birthday/getBirthdayList", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          let birthdayVo = res.data
          if (birthdayVo){
            this.soonList = birthdayVo.soonList
            this.todayList = birthdayVo.todayList
            this.oneList = birthdayVo.oneList
            this.twoList = birthdayVo.twoList
            this.threeList = birthdayVo.threeList
            this.fourList = birthdayVo.fourList
            this.fiveList = birthdayVo.fiveList
            this.otherList = birthdayVo.otherList
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getBirthdayList()
      this.$store.commit('navigationListChange', ['社交管理', '生日管理'])
    },
  }
</script>

<style >

  .el-table .danger-row {
    background: #FDE2E2;
  }

  .el-table .warning-row {
    background: #FAECD8;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .el-table .primary-row {
    background: #E1F3D8;
  }



</style>
